<template>
    <div class="continer">
        <div class="topBox">
        <!-- 头像信息 -->
            <div class="headBox">
            <img class="head" src="@/assets/images/test3.jpg" alt="">
            <img class="sex" src="@/assets/images/sex.jpg" alt="">
            </div>
            <div class="right">
            <span class="nameTxt">十五地方</span>
            <span class="vipTxt">东易日盛集团VIP客户</span>
            <div class="locBox">
                <img class="locImg" src="@/assets/images/loc.png" alt="">
                <span>北京市朝阳区和平里东土城路</span>
            </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'UserInfo'
}
</script>
<style lang="stylus" scoped>
.continer
  width 100%
  display flex
  align-items center
  flex-direction column
  .topBox
    width 100%
    height 313px
    background url(../../../assets/images/minebg.jpg)
    background-size 100% 100%
    display flex
    align-items center
    .headBox
      width 198px
      height 198px
      box-sizing border-box
      border-radius 50%
      position relative
      margin-right 50px
      margin-left 70px
      margin-top 20px
      .head 
        width 180px
        height 180px
        border-radius 50%
        border 9px solid #625f61
      .sex
        width 50px
        height 50px
        border-radius 50%
        position absolute
        bottom 20px
        right 10px
    .right
      display flex
      flex-direction column
      justify-content center
      height 313px
      color #ffffff
      .nameTxt
        line-height 36px
        font-size 36px
        font-weight bold
        margin-bottom 20px
      .vipTxt
        line-height 22px
        font-size 22px
        color #cd0021
        margin-bottom 20px
      .locBox
        display flex
        align-items center
        font-size 22px
        color #ffffff
        .locImg
          width 26px
          height 32px
          margin 0 6px 0 0
</style>
